<script setup lang="ts">
import {ref,watch} from 'vue'
import {useUserStore} from "@/stores/userStore";
import router from "@/router";
const loginStore=useUserStore();
//表单校验（账户名+密码）
// 1.准备表单对象
const form=ref({
  account:'kongjl',
  pw:'1234',
  agree:true
})

// 2.准备规则对象
const rules={
  account:[
    {required:true,message:'用户名不能为空',trigger:'blur'}
  ],
  password:[
    {min:6,max:14, required:false,message:'密码长度应为3-14个字符',trigger:'blur'}
  ],
  agree:[{
    validator:(rule:any,value:any,callback:any)=>{
      console.log(value);
      //   自定义校验逻辑
      //   勾选就通过，不勾选就不通过
      //   如果逻辑通过，就调用callback()，否则调用callback(new Error('请勾选协议！'))
      if (value){
        callback()
      }else {
        callback(new Error('请勾选协议！'))
      }
    }
  }]
}
// 3.获取form实例做统一校验
const formRef=ref({})

// const router=useRouter();
// 调用实例方法
const doLogin=()=>{
  // 登录前清空store中的登录信息token，防止使用不合法账号也能登录
  loginStore.clearUserToken();
  // 调用实例方法,记住，用async方法调用
  formRef.value.validate( async (valid:any)=>{
    // valid:所有表单都通过校验才为true
    console.log(valid);
    // 以valid作为判断条件，如果通过校验才执行登录逻辑
    if (valid){
      // LOGIN
      // 可以自行axios登录

      // const {account,pw}:{account:string,pw:string}=form.value;
      // console.log(typeof pw);
      const {account,pw}:{account:string,pw:string}=form.value;
      await  loginStore.getUserInfo({account,pw});
      if (loginStore.userToken){
        await router.push('/')
      }
    }
  })
  console.log(loginStore.userToken);


}
// 1.用户名和密码 只需要通过简单的配置（看文档的方式-复杂功能通过多个不同组件拆解）
// 2.同意协议 自定义规则 validator:(rule,value,callback)->{}
// 3.统一校验 通过调用form实例的方法 validate->true

</script>

<template>
  <div class="form" >
    <!--最外层：绑定表单对象（form）和规则对象(rules)-->
    <el-form ref="formRef" :model="form" :rules="rules"  label-position="right" label-width="60px"
             status-icon>
      <!--中间层：绑定使用的规则字段(account)-->
      <el-form-item prop="account" label="账户">
        <!--最里面层：双向绑定表单数据-->
        <el-input v-model="form.account"/>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="form.pw"/>
      </el-form-item>
      <!--中间层：绑定使用的规则字段(account)-->
      <el-form-item  prop="agree" label-width="22px">
        <!--最里面层：双向绑定表单数据-->
        <el-checkbox  size="large" v-model="form.agree">
          我已同意隐私条款和服务条款
        </el-checkbox>
      </el-form-item>
      <el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
    </el-form>
  </div>

</template>

<style scoped>
.form {
  float: left;
  width: 30%;
  height: 10%;
  background: #ebebeb;
  margin: 10px;
  padding: 10px;

}
</style>